<!doctype html>
<head>
  <style>
    body {
      font-family: 'Helvetica', sans-serif;
    }
  </style>
</head>
<body>
  <div>
    <div id="chapters">
    </div>
  </div>
  <script>
    (() => {
      const DOM = {
        $chapters: document.getElementById('chapters'),
      };
      const URL = 'https://raw.githubusercontent.com/googlesamples/web-fundamentals/gh-pages/fundamentals/getting-started/primers';

      function getJSON(url) {
        return new Promise((resolve, reject) => {
          const req = new XMLHttpRequest();
          req.open('GET', url);
          req.onload = () => {
            if (req.status === 200) {
              resolve(JSON.parse(req.response));
              return;
            }
            reject(req.responseText);
          }
          req.onerror = (err) => {
            reject(err);
          }
          req.send();
        });
      }

      function init() {
        getJSON(`${URL}/story.json`).then(story => {
          const $heading = document.createRange().createContextualFragment(story.heading);
          DOM.$chapters.before($heading);
          return Promise.all(story.chapterUrls.map((url, index) => {
            return getJSON(`${URL}/${url}`);
          }));
        }).then(chapters => {
          const $chapters = document.createDocumentFragment();
          chapters.forEach(chapter => {
            $chapters.appendChild(document.createRange().createContextualFragment(chapter.html));
          });
          DOM.$chapters.appendChild($chapters);
        }).catch(err => {
          console.warn(err);
        });
      }

      document.addEventListener('DOMContentLoaded', init);
    })();
  </script>
</body>
</html>
